<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      [v-cloak] {
        display: none;
      }
    </style>
    <!-- BASE -->
    <base href="/" />
    <link rel="stylesheet" href="assets/sidebar/style.css" />
  </head>
  <body>
    <div id="app" v-cloak>
      <form action="" @submit.prevent="query">
        <div class="form-row">
          <div class="form-field">branch1:</div>
          <input-select
            v-model="branch1"
            :options="showBranches"
            class="form-controll"
          ></input-select>
        </div>
        <div class="form-row">
          <div class="form-field">branch2:</div>
          <input-select
            v-model="branch2"
            :options="showBranches"
            class="form-controll"
          ></input-select>
        </div>
        <div class="form-row">
          <div class="form-field">authors:</div>
          <input v-model="author" class="form-controll" placeholder="" />
        </div>
        <div class="form-btns">
          <button type="submit" :disabled="loading || queryDisabled">query</button>
        </div>
      </form>
      <div v-if="files">
        <div v-if="files.length > 0">
          <div class="filters">
            <div class="form-row">
              <div class="form-field">filter file:</div>
              <input
                v-model="filters.filePath"
                class="form-controll filters-filePath"
                type="text"
              />
            </div>
            <div class="form-row">
              <div class="form-field">filter author:</div>
              <input-select v-model="filters.author" :options="showAuthors" class="form-controll">
              </input-select>
            </div>
          </div>
          <ul v-if="showFiles.length > 0" ref="ul">
            <li
              v-for="v in showFiles"
              :key="v.filePath"
              :class="{active: activeFilePath===v.filePath, hover: lastActiveFilePath===v.filePath}"
              :title="v.filePath"
              @click="debounceClickFile(v, {preview: true})"
              @dblclick="debounceClickFile(v, {preview: false})"
            >
              <span class="actionFlag" :class="`actionFlag--${v.actionFlag}`"
                >{{v.actionFlag}}</span
              >
              <div class="filePath">
                <highlight-text :exp="filterFilePathExp" :txt="v.filePath"></highlight-text>
                <span v-if="v.srcFilePath"> (from <i>{{v.srcFilePath}}</i>)</span>
              </div>
              <div v-if="+v.addedLines > 0 || +v.removedLines > 0" class="linesNum">
                (<span class="linesNum--a"
                  >{{+v.addedLines>0? '+'+v.addedLines: v.addedLines }}</span
                >|<span class="linesNum--r"
                  >{{+v.removedLines>0? '-'+v.removedLines :v.removedLines }}</span
                >)
              </div>
            </li>
          </ul>
          <div v-else>no file</div>
        </div>
        <div v-else>not found files</div>
      </div>
    </div>
    <!-- <script src="https://unpkg.com/vue@next"></script> -->
    <script src="assets/lib/vue.js"></script>
    <script src="assets/sidebar/index.js"></script>
    <link rel="stylesheet" href="assets/lib/codicon/codicon.css" />
  </body>
</html>
